<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>书籍借阅页面</title>
        <script src="../js/jquery-3.4.1.min.js" charset="utf-8"></script>
        <script src="../layuilay/layui.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../layuilay/css/layui.css"  media="all">
</head>
<body>


        <!-- 检索框开始———————————————————— -->
        <div class="layuimini-container">
            <div class="layuimini-main">
                <fieldset class="layui-elem-field layuimini-search">
                    <legend>搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">ISBN</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="b_isbn" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">书名</label> 
                                    <div class="layui-input-inline">
                                        <input type="text" id="b_name"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">作者</label> 
                                    <div class="layui-input-inline">
                                        <input type="text" id="b_author"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">语言</label> 
                                    <div class="layui-input-inline">
                                        <select id="b_language" onfocus="selPro()">
                                                <option value="">--请选择--</option>
                                                <option value="中文">中文</option>
                                                <option value="日文">日文</option>
                                                <option value="英文">英文</option>
                                            </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">类别</label>
                                    <div class="layui-input-inline">
                                            <select id="b_classname" onfocus="selPro()">
                                                <option value="">请选择</option>
                                            </select>
                                    </div>
                                </div>
                                
                                
                                <div class="layui-inline">
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="searchBtn()"><i class="layui-icon">&#xe615</i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
    
            <!-- 检索框结束 -->
            <!-- 数据表格开始———————————————————— -->

            <table id="demo" lay-filter="test"></table>
            
            <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
        </script>
        </div>
    </div>
    <!-- 数据表格结束 -->

<!-- 渲染表格开始—————————————— -->
<script type="text/javascript">
var tableObj;
$(function(){
    searchBtn();
    selPro();
    })
    function searchBtn(){
           var b_isbn=$("#b_isbn").val();//
           var b_name=$("#b_name").val();
           var b_author=$("#b_author").val();
           var b_language=$("#b_language").val();
           var b_classname=$("#b_classname").val();

layui.use(['table','jquery','upload','layer','form'], function(){
    var table = layui.table;
    var $ = layui.$;
    var upload = layui.upload;
    var layer = layui.layer;
    var form = layui.form;
   
    tableObj=table.render({
     elem: '#demo'
     ,url:'/findByBbdto'
     ,toolbar: '#toolbarDemo'
     ,cellMinWidth: 90
     ,where:{
    	 isbn:b_isbn,
         name:b_name,
         author:b_author,
         class_name:b_classname,
         language:b_language
     } 
     ,cols: [[
    	 {field:'bookId', title: '图书ID', sort: true}
         ,{field:'author',title: '作者'}
         ,{field:'name',  title: '书名'}
         ,{fixed: 'right', align:'center', toolbar: '#barDemo'} 
     ]]
   ,page: true
   });
    table.on('tool(test)', function(obj){
        var data = obj.data;  // 获得当前行数据
        var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的event 参数对应的值）
       if(obj.event === 'detail'){
            form.val('fm',data);
              uindex= layer.open({
                  //form.val('fm',data);
                   type:1
                   ,title:"书籍详细界面"
                   ,content:$("#updatewin")
                   ,area:["933px","569px"]
               })
       }
     });
 });
}
</script>
<!-- 渲染表格结束-->
<script >
            //查询专业名称
            function selPro(){
                $.ajax({
                    url:"/selClassName",
                    data:{},
                    dataType:"json",
                    type:"post",
                    success:function(res){
                        if(res.length>0){
                            for(var i=0;i<res.length;i++){
                            $("#b_classname").append("<option value='"+res[i]+"'>"+res[i]+"</option>")}}}
                    })
                }

             
</script>
<!--修改窗体  -->
<div  id="updatewin" style="display:none">

<form class="layui-form" action="" lay-filter="fm">
    
             <div class="layui-form-item">
                <label class="layui-form-label">书名：</label>
                <div class="layui-input-inline">
                  <input disabled="disabled" type="text"  id="upname" name="name" placeholder="" autocomplete="off" class="layui-input">
                </div>
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline" >
              <input disabled="disabled" type="text" id="upauthor"  name="author" lay-verify="" autocomplete="off" placeholder="" class="layui-input">
            </div>
          </div>
           <div class="layui-form-item">
                <label class="layui-form-label">出版社：</label>
                <div class="layui-input-inline">
                  <input disabled="disabled" type="text"  id="uppublish" name="publish" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">书号：</label>
                <div class="layui-input-inline">
                  <input disabled="disabled" type="text"  id="upisbn" name="isbn" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>
               <div class="layui-form-item">
                <label class="layui-form-label">语言：</label>
                <div class="layui-input-inline">
                  <input disabled="disabled" type="text"  id="uplanguage" name="language" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">价格：</label>
                <div class="layui-input-inline" >
                  <input disabled="disabled" type="text"  id="upprice"  name="price" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>
               <div class="layui-form-item">
                <label class="layui-form-label">发布日期：</label>
                <div class="layui-input-inline">
                  <input disabled="disabled" type="text"  id="uppubDate" name="pubDate" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">图书类别：</label>
                <div class="layui-input-inline">
                <input disabled="disabled" type="text"  id="upclassId" name="class_name" placeholder="" autocomplete="off" class="layui-input"> 
                </div>
              </div>
               <div class="layui-form-item">
                <label class="layui-form-label">数量：</label>
                <div class="layui-input-inline">
                  <input disabled="disabled" type="text"  id="upnumber" name="number" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">被借次数：</label>
                <div class="layui-input-inline">
                  <input disabled="disabled" type="text"  id="uplendnum" name="lendnum" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>
               <div class="layui-form-item">
                <label class="layui-form-label  ">位置：</label>
                <div class="layui-input-inline">
                  <input disabled="disabled" type="text"  id="upposition" name="position" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
			    <label class="layui-form-label">简介：</label>
			    <div class="layui-input-block">
			      <textarea disabled="disabled"  class="layui-textarea" name="introduction"></textarea>
			    </div>
			  </div>
          </form>
</div>
</body>
</html>